{% extends "base.html" %}

{% block title %}任务管理 - 机器人管理系统{% endblock %}

{% block page_title %}任务管理{% endblock %}
{% block page_description %}查看和管理所有机器人任务{% endblock %}

{% block content %}
<div class="bg-white rounded-xl p-6 card-shadow mb-8">
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
        <h3 class="font-bold text-lg">任务列表</h3>
        <div class="flex flex-col sm:flex-row gap-3">
            <div class="relative">
                <select class="pl-4 pr-10 py-2 rounded-lg border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none bg-white">
                    <option>所有状态</option>
                    <option>已完成</option>
                    <option>进行中</option>
                    <option>待处理</option>
                    <option>已失败</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-2 pointer-events-none"></i>
            </div>
            <div class="relative">
                <select class="pl-4 pr-10 py-2 rounded-lg border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none bg-white">
                    <option>所有机器人</option>
                    {% for robot in robots %}
                    <option>{{ robot.name }}</option>
                    {% endfor %}
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-2 pointer-events-none"></i>
            </div>
            <a href="{{ url_for('create_task') }}" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                <i class="fa fa-plus mr-2"></i> 创建任务
            </a>
        </div>
    </div>
    
    <div class="overflow-x-auto">
        <table class="w-full min-w-[800px]">
            <thead>
                <tr class="border-b border-light-2">
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">任务名称</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">所属机器人</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">状态</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">创建时间</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">开始时间</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">耗时</th>
                    <th class="text-left py-4 px-4 font-semibold text-dark-2">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for task in tasks %}
                <tr class="border-b border-light-1 hover:bg-light-1/50 transition-colors">
                    <td class="py-4 px-4">{{ task.name }}</td>
                    <td class="py-4 px-4">
                        {% if task.robot %}
                        <div class="flex items-center space-x-2">
                            <img src="https://picsum.photos/id/{{ 1000 + task.robot.id }}/200/200" alt="{{ task.robot.name }}" class="w-6 h-6 rounded object-cover">
                            <span>{{ task.robot.name }}</span>
                        </div>
                        {% else %}
                        <span>未知机器人</span>
                        {% endif %}
                    </td>
                    <td class="py-4 px-4">
                        <span class="px-2 py-1 rounded-full text-xs 
                            {% if task.status == '已完成' %}bg-success/10 text-success
                            {% elif task.status == '进行中' %}bg-secondary/10 text-secondary
                            {% elif task.status == '待处理' %}bg-warning/10 text-warning
                            {% else %}bg-danger/10 text-danger{% endif %}">
                            {{ task.status }}
                        </span>
                    </td>
                    <td class="py-4 px-4">{{ task.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td class="py-4 px-4">
                        {% if task.start_time %}
                        {{ task.start_time.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td class="py-4 px-4">
                        {% if task.duration %}
                        {{ task.duration }} 分钟
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td class="py-4 px-4">
                        <div class="flex space-x-2">
                            <button class="text-primary hover:text-primary/80 transition-colors" title="查看详情">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="text-dark-2 hover:text-dark transition-colors" title="编辑">
                                <i class="fa fa-edit"></i>
                            </button>
                            {% if task.status == '待处理' %}
                            <button class="text-success hover:text-success/80 transition-colors" title="开始任务">
                                <i class="fa fa-play"></i>
                            </button>
                            {% elif task.status == '进行中' %}
                            <button class="text-warning hover:text-warning/80 transition-colors" title="暂停任务">
                                <i class="fa fa-pause"></i>
                            </button>
                            {% elif task.status == '已失败' %}
                            <button class="text-primary hover:text-primary/80 transition-colors" title="重试任务">
                                <i class="fa fa-refresh"></i>
                            </button>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <div class="flex items-center justify-between mt-6">
        <p class="text-sm text-dark-2">显示 1 到 {{ tasks|length }}，共 {{ tasks|length }} 个任务</p>
        <div class="flex space-x-1">
            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-light-2 text-dark-2 hover:border-primary hover:text-primary transition-colors">
                <i class="fa fa-chevron-left text-xs"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-light-2 text-dark-2 hover:border-primary hover:text-primary transition-colors">
                <i class="fa fa-chevron-right text-xs"></i>
            </button>
        </div>
    </div>
</div>
{% endblock %}
